<template>
	<view class="page">
		<scroll-view class="nav-scroll" scroll-x>
			<view class="nav-box">
				<view class="nav-item" :class="{'selected' : item.id == navSelected}" v-for="(item,index) in navList" :key="index" @click="navChange(item.id)">{{item.name}}</view>
			</view>
		</scroll-view>
		<view class="remind-box" v-if="navSelected == 3">
			请对今日任务进行排序，我们会把前3个任务标记为今日要做的最重要的三项任务
		</view>
		<view class="remind-box" v-if="navSelected == 5">
			请对本周任务进行排序，我们会把前3个任务标记为本周要做的最重要的三项任务
		</view>
		<view class="remind-box" v-if="navSelected == 7">
			请对本月任务进行排序，我们会把前3个任务标记为本月要做的最重要的三项任务
		</view>
		<scroll-view class="card-scroll" :class="{'disabledbutton-scroll' : navSelected == 7}" @scrolltolower="scrollPage" scroll-y>
			<view>
				<view >
					<card :key="item.id" v-for="(item,index) in cardList" :iswarning="item.sortIndex < 3" :index="item.sortIndex" :sortTop="item.sortIndex == 0" :sortBottom="pageInfo.currentPage >=pageInfo.totalPage && item.sortIndex + 1 == cardList.length" :sortHidden="navSelected == 7" :sort="true" :data="item"  @topping="sortToping" @moveUp="sortMoveUp" @moveDown="sortMoveDown"></card>
				</view>
			</view>
		</scroll-view>
		<view class="button confirm-button" @click="confirm" v-if="navSelected != 7">确定</view>
	</view>
</template>

<script>
	import * as api from'@/utils/api.js';
	import card from '../component/card/card';
	export default {
		components:{
			card
		},
		data() {
			return {
				apiInfo:{
					currentPage:1,
					pageSize:15,
					timeType:3
				},
				pageInfo:{},// 页码信息
				scrollType:true, // 是否允许翻页 
				navSelected:3,
				cardList:[],// 任务列表
				navList:[
					{
						id:3,
						name:'每日'
					},
					{
						id:5,
						name:'每周'
					},
					{
						id:7,
						name:'每月'
					},
				],
			}
		},
		mounted() {
			let apiInfo = this.apiInfo;
			this.queryMWDTaskByPage(apiInfo);
		},
		methods: {
			/**
			 * 滚动翻页触发事件
			 */
			scrollPage:function(){
				let scrollType = this.scrollType;
				if(scrollType == true){
					let apiInfo = this.apiInfo;
					apiInfo.currentPage += 1;
					this.apiInfo = apiInfo;
					this.queryMWDTaskByPage(apiInfo);
				}
			},
			/**
			 * 查询月周日任务(分页)
			 */
			queryMWDTaskByPage:function(data){
				let that =this;
				let cardList = this.cardList;
				api.queryMWDTaskByPage(data).then(res=>{
					for(let i = 0; i<res.data.result.length;i++){
						res.data.result[i].sortIndex = i;
					}
					cardList.push.apply(cardList,res.data.result);
					that.cardList = cardList;
					that.pageInfo = res.data.page;
					if(res.data.page.currentPage > res.data.page.totalPage){
						that.scrollType = false;
						uni.showToast({
							title: '没有更多',
							icon:'none',
							duration: 2000
						});
					}
					console.log(cardList);
				})
			},
			/**
			 * 导航栏改变触发事件
			 */
			navChange:function(id){
				let apiInfo = this.apiInfo;
				apiInfo.timeType = id;
				apiInfo.currentPage = 1;
				this.scrollType=true;
				this.apiInfo = apiInfo;
				this.cardList = [];
				this.navSelected = id;
				this.queryMWDTaskByPage(apiInfo);
			},
			/**
			 * 置顶按钮触发事件
			 */
			sortToping:function(data){
				let that = this;
				let cardList = that.cardList;
				let List = [];
				let info = Object.assign({},cardList[data]);
				info.sortIndex = 0;
				cardList.splice(data,1); 
				List.push(info);
				for(let i = 0;i<cardList.length;i++){
					cardList[i].sortIndex=i + 1;
					List.push(cardList[i]);
				}
				that.$nextTick(function(){
					that.cardList = List;
				});
			},
			/**
			 * 上移按钮触发事件
			 */
			sortMoveUp:function(data){
				let that = this;
				let cardList = that.cardList;
				let List = [];
				let top = Object.assign({},cardList[data]);
				top.sortIndex = data - 1;
				let down = Object.assign({},cardList[data - 1]);
				down.sortIndex = data;
				cardList.splice(data,1,down);
				cardList.splice(data - 1,1,top);
				that.cardList = [];
				that.$nextTick(function(){
					that.cardList = cardList;
				})
			},
			/**
			 * 下移按钮触发事件
			 */
			sortMoveDown:function(data){
				let that = this;
				let cardList = that.cardList;
				let top = Object.assign({},cardList[data + 1]);
				top.sortIndex = data;
				let down = Object.assign({},cardList[data]);
				down.sortIndex = data + 1;
				cardList.splice(data + 1,1,down);
				cardList.splice(data,1,top);
				that.cardList = [];
				that.$nextTick(function(){
					that.cardList = cardList;
				})
			},
			/**
			 * 顺序改变确认按钮触发事件
			 */
			confirm:function(){
				let that = this;
				let data = [];
				let cardList = this.cardList;
				let navSelected = this.navSelected;
				
				cardList.forEach(res=>{
					if(res.sortIndex < 3){
						if(navSelected == 5){
							data.push({id:res.id,isWeekImportanceTask:1})
						}else if(navSelected == 3){
							data.push({id:res.id,isDayImportanceTask:1})
						}
					}
				})
				api.setWDImportantTask({taskReqs:data}).then(res=>{
					uni.showToast({
						title: '设置成功',
						icon:'success',
						duration: 2000
					});
					let apiInfo = that.apiInfo;
					apiInfo.currentPage = 1;
					that.apiInfo = apiInfo;
					that.scrollType = true;
					setTimeout(function(){
						that.cardList = [];
						that.queryMWDTaskByPage(apiInfo);
					},2000);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #f6f6f6;
	}
	.nav-scroll{
		white-space: nowrap;
		
		.nav-box{
			display: flex;
			.nav-item{
				line-height:70rpx;
				width: 33.333%;
				text-align: center;
				font-size: 28rpx;
				color:#898989;
			}
			.selected{
				color:#35a57f;
				position: relative;
			}
			.selected::after{
				position: absolute;
				content:'';
				background-color: #35a57f;
				bottom:0;
				left: 0;
				width: 100%;
				height:4rpx;
			}
		}	
	}
	.remind-box{
		padding:0 20rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		color: #ff6f7c;
		background-color: white;
		font-size:26rpx;
		text-align: center;
	}
	.card-scroll{
		height:calc(100vh - 290rpx - constant(safe-area-inset-bottom));
		height:calc(100vh - 290rpx - env(safe-area-inset-bottom));
	}
	.disabledbutton-scroll{
		height:calc(100vh - 170rpx - constant(safe-area-inset-bottom));
		height:calc(100vh - 170rpx - env(safe-area-inset-bottom));
	}
	.button{
		border-radius: 10rpx;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
		color: white;
	}
	.confirm-button{
		background-color: #36af86;
		position: fixed;
		bottom:calc(20rpx + constant(safe-area-inset-bottom));
		bottom:calc(20rpx + env(safe-area-inset-bottom)); 
		width:calc(100% - 40rpx);
		left: 20rpx;
	}
	
</style>
